<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/Recommend.css" />
	</head>

	<body id='zbody'>
		<script src="js/mui.min.js"></script>

		<div class='head' id='head'>
			<span class="mui-action-back mui-icon mui-icon-back" style="color: white;margin-top: 10px;"></span>
			<span id='recommend'>推荐</span>
		</div>
		<div class="comicOut">
			<!--	<div class='comics'>
				<img src="img/kuiye.jpg" class='pic' />
				<div class='text'>
					<div class='ztext'>
						<span class='classification'>amazing</span><br />
						<span class='bookname'>真的抽象</span><br />
						<span class='content'>strat with the simple knock knock knock i don't give a thing about u guys bulabulabula</span>
						<div class='like' value="未关注" count='0'>
							<a><span class="mui-icon mui-icon-checkmarkempty add adds"></span></a>
							<a><span class="mui-icon mui-icon-plusempty add delete"></span></a>
							<span class='zlike'>关注</span>
						</div>
						<div style="height: 20px;width: 100%;"></div>
					</div>
				</div>
			</div>-->
		</div>

		<!--	<div class='hot'>热门必看</div>
		<div class='hotbook'>
			<img src="img/6d7d2adbce39aa293e7f89ed9e75974a.jpg" / class='picture'>
			<span class='hot-bookname'>匪夷所思</span><br />
			<span class='hot-fei'>左拐</span>
			<div class='hot-like' value='未关注' count='0'>
				<a class='aaa'><span class="mui-icon mui-icon-plusempty hot-add"></span></a>
				<span class='hot-zlike guanzhu'>关注</span>
				<span class='hot-zlike2'>已关注</span>
			</div>
		</div>-->

		<script src="js/url.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
			/*
									 如果你要用jQuery必须将下面这行代码放在第一行，然后将$符号换成jQuery
									 * */
			$.noConflict();
			var div = document.getElementsByClassName("comicOut")[0];
			jQuery.ajax({
				type: 'post',
				url: serverip.ip + '/allComics',
				dataType: 'json',
				success: function(data) {
					div.innerHTML = null;
					for(var i = 0; i < data.length; i++) {
						var content = document.createElement('div');
						content.classList.add('comics');
						content.innerHTML = '<div class="img"><img src="' + serverip.ip2 + data[i].id + '/' + data[i].icon + '" class="pic"/>' +
							'<div class="comicsid" style="display:none;">' +
							+data[i].id + '</div></div>' +
							'<div class="text"><div class="ztext"><span class="classification">' +
							data[i].category + '</span><br/><span class="bookname">' +
							data[i].comicsname + '</span><br/><span class="content">' +
							data[i].introduce + '</span><div class="like" value="未关注" count="0">' +
							'<a><span class="mui-icon mui-icon-checkmarkempty add adds"></span></a>' +
							'<a><span class="mui-icon mui-icon-plusempty add delete"></span></a>' +
							'<span class="zlike">关注<div class="comicsid" style="display:none;">' +
							+data[i].id + '</div></span></div><div style="height: 20px;width: 100%;"></div></div></div>';
						div.appendChild(content);

					}
					jQuery(".img").bind("tap", function() {
						var id = jQuery(this).find('.comicsid:first').text();
						mui.openWindow({
							url: 'commandComics.html',
							extras: {
								comicsid: id
							}
						})
					});

					jQuery(".zlike").bind("tap", function() {
						var id = jQuery(this).find('.comicsid:first').text();
						jQuery.ajax({
							type: 'post',
							url: serverip.ip + '/attentionVO/add',
							dataType: 'json',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							data: {
								'cid': id
							},
							success: function(data) {
								if(data != 0) {
									alert('关注成功')
								}
							}
						});
					})

				}
			});
		</script>

		<script type="text/javascript">
			var likes = document.getElementsByClassName("like");
			var adds = document.getElementsByClassName("adds");
			var deletes = document.getElementsByClassName("delete");
			for(var i = 0; i < likes.length; i++) {
				likes[i].addEventListener("tap", function() {
					/*console.log(document.getElementsByClassName("like")[0].getAttribute("value")=="未关注")*/
					if(this.getAttribute("value") == "未关注") {
						this.setAttribute("value", "已关注");
						deletes[this.getAttribute("count")].style.display = "none";
						adds[this.getAttribute("count")].style.display = "block";

					} else {
						this.setAttribute("value", "未关注");
						deletes[this.getAttribute("count")].style.display = "block";
						adds[this.getAttribute("count")].style.display = "none";
					}

				});
			}

			/*var hots = document.getElementsByClassName("hot-like");
			var aaas = document.getElementsByClassName("aaa");
			var zhots = document.getElementsByClassName("hot-zlike");
			var zhots2 = document.getElementsByClassName("hot-zlike2");
			for(var i = 0; i < hots.length; i++) {
				hots[i].addEventListener("tap", function() {
					if(this.getAttribute("value") == "未关注") {
						this.setAttribute("value", "已关注");
						aaas[this.getAttribute("count")].style.display = "none";
						zhots[this.getAttribute("count")].style.display = "none";
						zhots2[this.getAttribute("count")].style.display = "block";
						console.log("改完了");
					} else {
						this.setAttribute("value", "未关注");
						aaas[this.getAttribute("count")].style.display = "block";
						zhots[this.getAttribute("count")].style.display = "block";
						zhots2[this.getAttribute("count")].style.display = "none";
						console.log("改完了2");
					}
				})
			}*/

			/*window.onscroll = function() {
				if(document.body.scrollTop > 60) {
					document.getElementById("back").style.color = "black";
					document.getElementById("recommend").style.color = "black";
					document.getElementById("head").style.backgroundColor = "white";
				} else {
					document.getElementById("back").style.color = "white";
					document.getElementById("recommend").style.color = "white";
					document.getElementById("head").style.backgroundColor = "";
				}
			}*/
		</script>
	</body>

</html>